<template>
	<view class="box mt-15">
		<view class="user-info" v-if="user">
			<view class="avatar">
				<u-image :src="user.avatar==null?avatar:user.avatar" width="48px" height="48px" border-radius="50%">
				</u-image>
			</view>
			<view class="role-info">
				<template v-if="userVipRole.length>0">
					<view class="info">
						<view v-for="(item,index) in userVipRole">
							您的{{ item.label }}{{ item.expired_at==0?'永久有效':'将于'+item.expired_at+'到期' }}</view>
						<view>购买后将会有效期顺延</view>
					</view>
				</template>
				<template v-else>
					<view class="info">
						<view>您还不是本站会员哦</view>
						<view>免费会员</view>
					</view>
				</template>
			</view>
		</view>

		<view class="role-item-box">
			<view class="role-item" v-for="item in list" :key="item._id" :class="{ active: roleId === item._id }"
				@click="roleId = item._id">
				<view class="name">{{ item.name }}</view>
				<view class="price">
					<text class="small">￥</text>{{ item.charge }}
				</view>
				<view class="desc">
					<view v-for="(descItem, index) in item.description.split('\n')" :key="index">{{
            descItem
          }}</view>
				</view>
			</view>
		</view>

		<view class="bottom-bar" @click="goOrder()">购买会员</view>
	</view>
</template>

<script>
	import utils from "@/utils/util.js";
	var vk; // vk依赖
	export default {
		data() {
			return {
				avatar: require('../../static/member/avatra.png'),
				list: [],
				roleId: 0,
				user: {},
				userVipRole: []
			};
		},
		computed: {
			isIosApp() {
				return utils.isIosApp();
			},
		},
		onLoad() {
			vk = this.vk;
		},
		onShow() {
			this.getData();
			this.getRoles();
		},
		methods: {
			getData() {
				this.user = getApp().globalData.userInfo
				uni.vk.callFunction({
					url: 'client/vip_roles/kh/getMyRoles',
				}).then(res => {
					this.userVipRole = res.data
				})
			},
			getRoles() {
				this.list = [];
				vk.callFunction({
					url: 'client/vip_roles/kh/getList',
					title: '请求中...',
				}).then((data) => {
					this.list = data.data
				}).catch((err) => {
					this.$u.toast("暂无可购买的会员");
				});
			},
			goOrder() {
				if (this.roleId === 0) {
					this.$u.toast("请选择需要购买的会员");
					return;
				}
				let role = {};
				for (let i = 0; i < this.list.length; i++) {
					if (this.list[i]._id === this.roleId) {
						role = this.list[i];
						break;
					}
				}

				//先创建订单
				uni.showLoading({
					title: "创建订单中..."
				})
				uni.vk.callFunction({
					url: 'client/order/kh/create/role',
					data: {
						_id: role._id,
						type: 'role',
						goods_name: role.name,
						charge: role.charge
					},
					success(data) {
						uni.hideLoading()
						//再前往支付
						uni.vk.redirectTo('/pages/payment/payType?order_id=' + data.order_id)
					},
					fail() {
						uni.hideLoading()
					}
				})

				// this.navigateTo(
				// 	"/pages/order/order?goods_id=" +
				// 	role._id +
				// 	"&goods_name=" +
				// 	role.name +
				// 	"&goods_label=VIP会员&goods_charge=" +
				// 	role.charge +
				// 	"&goods_type=vip_role"
				// );
			},
		},
	};
</script>

<style lang="scss" scoped>
	.user-info {
		width: 100%;
		height: auto;
		float: left;
		display: flex;
		padding: 20px 15px;
		box-sizing: border-box;
		margin-bottom: 15px;
		background-color: white;

		.role-info {
			padding-top: 4px;
			margin-left: 15px;
			flex: 1;
			font-size: 13px;
			font-weight: 400;
			color: rgba(51, 51, 51, 1);
			line-height: 20px;
		}
	}

	.role-item-box {
		width: 100%;
		height: auto;
		float: left;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 15px;

		.role-item {
			width: calc(50% - 5px);
			height: auto;
			float: left;
			padding: 15px;
			box-sizing: border-box;
			border-radius: 8px;
			margin-bottom: 15px;
			border: 1px solid white;
			background-color: white;

			&:nth-of-type(even) {
				margin-left: 10px;
			}

			&.active {
				border: 1px solid rgba(225, 165, 0, 1);
				background: rgba(255, 237, 237, 1);
			}

			.name {
				width: 100%;
				height: auto;
				float: left;
				font-size: 14px;
				font-weight: 600;
				color: rgba(225, 165, 0, 1);
				line-height: 14px;
				margin-bottom: 20px;
			}

			.price {
				width: 100%;
				height: auto;
				float: left;
				font-size: 28px;
				font-weight: 600;
				color: rgba(51, 51, 51, 1);
				line-height: 24px;
				margin-bottom: 15px;

				.small {
					font-size: 18px;
				}
			}

			.desc {
				width: 100%;
				height: auto;
				float: left;
				font-size: 12px;
				font-weight: 400;
				color: rgba(102, 102, 102, 1);
				line-height: 18px;
			}
		}
	}

	.bottom-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 990;
		width: 100%;
		height: 49px;
		background-color: #333;
		line-height: 49px;
		text-align: center;
		color: white;

		&:active {
			background-color: rgba(#333, 0.9);
		}
	}
</style>

<style>
	page {
		background-color: #f8f8f8;
	}
</style>
